import { genMixColor } from './gen-color.js'
// 默认主题配置
export const defaultThemeConfig = {
    colors: {
        primary: '#3AAFCD',
        warning: '#FFB21E',
        danger: '#FF0000',
        success: '#67C23A',
        info: '#6966F5',
    }
}

export const sideBarConfig = {
    colors: {
        menuActiveText: '#fff',
        menuText: '#ffffff99',
        menuBg: '#021322',
    }
}

// 本地缓存 key
const THEME_KEY = 'theme';

// 获取本地缓存主题
export const getTheme = () => {
    const theme = localStorage.getItem(THEME_KEY);
    return theme ? JSON.parse(theme) : defaultThemeConfig;
};

// 设置主题
export const setTheme = (_data) => {
    const oldTheme = defaultThemeConfig;

    // 将传入配置与旧的主题合并，以填补缺省的值
    const data = { ...oldTheme, ..._data }
    console.log(data)
    // // 将缓存到浏览器
    // localStorage.setItem(THEME_KEY, JSON.stringify(data));

    // TODO:将主题更新到css变量中，使之生效
    setResetProperty()
    updateThemeColorVar(data);
}

function setStyleProperty(propName, value) {
    document.documentElement.style.setProperty(propName, value);
}

function updateThemeColorVar({ colors }) {
    // 遍历当前主题色，生成混合色，并更新到css变量（tailwind + elementPlus）
    for (const brand in colors) {
        updateBrandExtendColorsVar(
            colors[brand],
            brand
        );
    }

    function updateBrandExtendColorsVar(color, name) {
        // TODO:生成混合色
        const { DEFAULT, dark, light } = genMixColor(color)
        // 每种主题色由浅到深分为五个阶梯以供开发者使用。
        setStyleProperty(`--${name}-lighter-color`, light[5])
        setStyleProperty(`--${name}-light-color`, light[3])
        setStyleProperty(`--${name}-color`, DEFAULT)
        setStyleProperty(`--${name}-deep-color`, dark[2])
        setStyleProperty(`--${name}-deeper-color`, dark[4])

        // elementPlus主题色更新
        setStyleProperty(`--el-color-${name}`, DEFAULT)
        setStyleProperty(`--el-color-${name}-dark-2`, dark[2])
        setStyleProperty(`--el-color-${name}-light-3`, light[3])
        setStyleProperty(`--el-color-${name}-light-5`, light[5])
        setStyleProperty(`--el-color-${name}-light-7`, light[7])
        setStyleProperty(`--el-color-${name}-light-8`, light[8])
        setStyleProperty(`--el-color-${name}-light-9`, light[9])
    }
}

function setResetProperty(params) {
    const fonts = {
        '--el-text-color-primary': '#303133',
        '--el-text-color-regular': ' #606266',
        '--el-text-color-secondary': '#909399',
        '--el-text-color-placeholder': '#a8abb2',
        '--el-text-color-disabled': '#c0c4cc',
        '--el-card-padding': '16px'
    }
    for (const key in fonts) {
        setStyleProperty(key, fonts[key])
    }

}